<template>
  <div class="app-container">
    <!-- 数据概览 -->
    <h4>思源历年毕业离校人数</h4>
    <div class="echart" ref="dataLine" :style="myChartStyle"></div>
    <div class="search-form-box">
      <el-form ref="formRef" :inline="true">
        <el-form-item label="毕业年份">
          <el-select v-model="gradYear" placeholder="请选择毕业年份" @change="statistics">
            <el-option v-for="(item,index) in yearData" :key="index" :label="item.GRAD_YEAR" :value="item.DGS_ID" >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <h4>毕业高校人数统计</h4>
    <div class="library-title">
      <div class="contens">毕业离校人数：{{form.SUMNUMBERENROLLMENT}}人</div>
      <div class="contens">本科人数：{{form.ASSOCENROLLMENT}}人</div>
      <div class="contens">专科人数：{{form.UGENROLLMENT}}人</div>
      <div class="contens">专升本人数：{{form.UTBENROLLMENT}}人</div>
    </div>
    <h4>毕业高校进度统计</h4>
    <div class="chart-title">
      <div class="eacharts-title">
        <pieChart style="width: 50%; height: 50%;z-index: 1000;"  :list="statusMapList" v-if="statusMapList && flag"></pieChart>
      </div>
      <div class="top">
        <div style="font-weight: bold;padding: 3PX;">未确认院系统计</div>
        <div class="chart-title">
          <div class="chart-top">
          <div class="ranking" v-for="(v,i) in topList.slice(0,5)" :key="i">
            <div class="ranking-text-left">{{i+1}}.{{v.COLLEGENAME}}</div>
            <div  class="ranking-text-conent">毕业人数：{{v.SUMENROLLMENT}}人</div>
            <div  class="ranking-text-rigth">确认人数：{{ v.YENROLLMENT }}人</div>
          </div>
        </div>
          <div class="chart-top">
          <div class="ranking" v-for="(v,i) in topList.slice(5,10)" :key="i">
            <div  class="ranking-text-left">{{i+6}}.{{v.COLLEGENAME}}</div>
            <div  class="ranking-text-conent">毕业人数：{{v.SUMENROLLMENT}}人</div>
            <div  class="ranking-text-rigth">确认人数：{{ v.YENROLLMENT }}人</div>
          </div>
        </div>
        </div>
        
      </div>
    </div>
    <div class="analyze">
      <div class="analyze-content" v-for="item in overDataList" :key="item">
        <p>{{item.LABEL}}</p>
        <p>{{item.title}}</p>
        <p>{{item.RSNUMBER}}人 {{ item.data }}</p>
        
        <p v-if="item.LABEL != '财务部'">{{ item.LABEL == '图书馆'? item.AMOUNT + '本图书': '合计：' + item.AMOUNT + '元'}}</p>
        <p v-if="item.LABEL == '财务部'">完成率{{  item.AMOUNT }}%</p>
      </div>
    </div>
  </div>
</template>

<script>
import {
  statHgn,
  statEn,
  statGp,
  dpa
} from "@/api/departure/overviewDate";
import {
  getGradYearSelector
} from "@/api/departure/gradsettings";

import pieChart from "@/views/components/pieChart/index";
import * as echarts from "echarts";
export default {
  name: "instructor",
  dicts: ["dep_grad_status"],
  components: { pieChart },
  data() {
    return {
      myChartStyle: { width: "100%", height: "300px" }, //图表样式
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      gradYear: '',
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      flag: false,
      topList: [],
      overDataList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        dgsId: null,
        gdpStatus: null,
      },
      statusMapList: [
      { value: "", name: "毕业离校学生" },
        { value: "", name: "学生已确认" },
      ],
      // 表单参数
      form: {},
      yearData:[]
    };
  },
  created() {
    // this.getList();
    // this.$nextTick(() => {
    //   this.peiEcharts();
    // });
    getGradYearSelector().then(res=> {
      this.yearData = res.data
      this.gradYear =  res.data[0].DGS_ID
      this.getData()
      statHgn({dgsId:this.gradYear}).then(res => {
        console.log(res,'统计历年毕业人数')
        this.statList = res.data
        this.peiEcharts();
      })
    })
   
    
  },
  methods: {
    getData() {
      
      statEn(this.gradYear).then(res => {
        console.log(res,'统计各学历毕业离校人数')
        this.form = res.data

      })
      this.flag = false
      statGp(this.gradYear).then(res => {
        console.log(res,'毕业离校进度统计')
        this.topList = res.collegeGpN

        console.log(this.topList,'sdsjd')
        this.flag = true
        this.statusMapList[0].value = res.sumGpN.NOENROLLMENT
        this.statusMapList[1].value = res.sumGpN.YENROLLMENT
      })
      dpa(this.gradYear).then(res => {
        console.log(res,'离校情况分析')
        this.overDataList = res.data.map(item => {
          return {
            ...item,
            title: '',
            data: ''
          }
        })
        this.overDataList.forEach((item) => {
        if (item.LABEL == "宿管") {
         
          item.title = '赔偿金'
          item.data = '赔偿'
        } else if (item.LABEL == "图书馆") {
        
          item.title = '借书归还'
          item.data = '未还'
        } else if (item.LABEL == "饭卡") {
        
          item.title = '饭卡退费'
          item.data = '退费'
        } else if (item.LABEL == "水电费") {
          item.feeType = "水电费";
          item.title = '电费退费'
          item.data = '退费'
        } else if (item.LABEL == "书费") {
          item.LABEL == "辅导员"
          item.title = '书费退费'
          item.data = '退费'
        } else if (item.LABEL == "财务部") {
          item.title = '费用结算'
          item.data = '完成'
        }
      });
      })

    },
    statistics() {
      this.getData()
    },
    peiEcharts() {
      console.log(this.pieName, "ddd");
      // 饼图
      const option = {
        xAxis: {
          type: "category",
          data: this.statList.xLabels,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            type: "line",
            data: this.statList.data,
          },
        ],
      };
      this.myChart = echarts.init(this.$refs.dataLine);
      this.myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },
  },
};
</script>
<style scoped>
.title-tips {
  text-align: center;
  border: 1px solid #d0d0d0;
  padding: 5px;
  margin-bottom: 5px;
}
.chart-title {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.eacharts-title {
  width: 30%;
  text-align: center;
   z-index: 10000;
}
.top {
  width: 70%;
  background-color: #efefef;
 
}
.ranking {
  width: 100%;
  display: flex;
 padding: 2%;
  justify-content: space-between;
}
.chart-top {
  width: 49%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.ranking-text-left{
  width: 33%;
  text-align: left;
}
.ranking-text-rigth{
  width: 33%;
  text-align: right;
}
.ranking-text-conent{
  width: 33%;
  text-align: center;
}
h4 {
  font-weight: bold;
  border-left: 5px solid #4095e5;
  padding-left: 10px;
}





.library-title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.contens {
  width: 24%;
  border: 1px solid #d0d0d0;
  text-align: center;
  padding: 2%;
}
.analyze {
  display: flex;
  justify-content: space-between;

  width: 100%;
}
.analyze-content {
  width: 16%;
  border: 1px solid #d0d0d0;
  text-align: center;
}
.analyze-content p:nth-child(1) {
  font-weight: bold;
}
</style>